<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>

<!-- Icons-->
<link th:href="@{/asserts/vendors/@coreui/icons/css/coreui-icons.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/flag-icon-css/css/flag-icon.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/simple-line-icons/css/simple-line-icons.css}" rel="stylesheet">

<!-- Main styles for this application-->
<link th:href="@{/asserts/css/style.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/pace-progress/css/pace.min.css}" rel="stylesheet">
   
<!-- ztree -->
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">
		
<!-- 
<script type="text/javascript" src="http://www.treejs.cn/v3/js/jquery-1.4.4.min.js"></script>
 -->
 
<script type="text/javascript" th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>

	<div layout:fragment="content">
	
		<style type="text/css">
table.dataTable thead th, table.dataTable thead td {
	border-bottom: 1px solid #ddd;
}

table.dataTable tfoot th, table.dataTable tfoot td {
	border-top: 1px solid #ddd;
}

/* datatable */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
	.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
	{
	background: #3f51b5;
	border: 0px;
	color: #ffff !important;
	padding: 0.3em 1em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	padding: 0.3em 1em;
	border: 0px;
}

.form-control {
	border-radius: 2px;
	box-shadow: none;
	border-color: #dddddd;
	padding: 8px 12px;
}

.form-group {
	margin-right: 20px;
}

.component-section {
	margin-top: 20px;
}

label {
	margin-right: 5px;
}

table.dataTable {
	line-height: 1.8;
}
.col-lg-3 {
	-ms-flex: 0 0 24% !important;
	flex: 0 0 24% !important ;
	max-width: 24% !important;;
}
.margin-right-0{
	margin-right:0px !important ;
}
</style>

		<!-- nav_start -->
		<ol class="breadcrumb">
			<li class="breadcrumb-item">基础平台</li>
			<li class="breadcrumb-item">监管按理</li>
			<li class="breadcrumb-item active">系统预警</li>
		</ol>
		<!-- nav_end -->

		<div class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
					
						<div class="card col-lg-3" style="float: left; margin-right: 1%">
							<div class="card-body">
								<input type="hidden" name="applicationId" value="${applicationId}" />
								<ul id="treeDemo" class="ztree"></ul>	
							</div>
						</div>
				
						
						<div class="col-lg-9" style="float: left;">

						<div class="card">

							<div class="card-body">
								<form class="form-inline" id="AlinesnoSearchForm" action=""
									method="post">

									<div class="form-group">
										<label for="resourceName">菜单名称</label> <input
											class="form-control" id="resourceName"
											name="condition[resourceName|like]" type="text"
											placeholder="菜单名称">
									</div>
									<div class="form-group">
										<label for="resourceLink">菜单链接</label> <input
											class="form-control" id="resourceLink"
											name="condition[resourceLink|like]" type="text"
											placeholder="菜单链接">
									</div>

									<button type="button" onclick="search(this)"
										class="btn btn-primary">搜索</button>

								</form>
							</div>

						</div>

						<div class="card">
							<div class="card-body">
								<table id="datatables" class="display" style="width: 100%">
									<thead>
										<tr>
											<th>所属应用</th>
											<th>用户名</th>
											<th>登陆名</th>
											<th>所属部门</th>
											<th>角色</th>
											<th>权限类型</th>
											<th>状态</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
									<tfoot>
										<tr>
											<th>所属应用</th>
											<th>用户名</th>
											<th>登陆名</th>
											<th>所属部门</th>
											<th>角色</th>
											<th>权限类型</th>
											<th>状态</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>


					</div>
					<!-- /.col-->
				</div>
				<!-- /.row-->
			</div>
		</div>


	</div>

	<script th:src="@{/asserts/vendors/datatables/datatables.js}"></script>
	<script th:src="@{/asserts/vendors/layer/layer.js}"></script>
	<script th:src="@{/asserts/vendors/jquery.form/jquery.form.min.js}"></script>

	<!-- 
	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.min.js}"></script>
	 -->	

	
<SCRIPT type="text/javascript">
	var setting = {
		async : {
			enable : true,
			type: "get" , 
			url: ctx+"boot/platform/department/departmentData?id=536478251871109120"
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pid",
				rootPId : 0
			},
			key : {
				name : "fullName"
			}
		},
		callback : {
			onClick : zTreeOnClick ,
			onAsyncSuccess : zTreeOnAsyncSuccess
		}
	};

	function zTreeOnClick(event, treeId, treeNode) {
		console.log("tree node id = " + treeNode.id) ; 
		$("input[id=selectResourceParentNode]").attr("data-id" ,treeNode.id) ; 
		$("input[id=selectResourceParentNode]").attr("data-resourceName" ,treeNode.resourceName) ; 
	};

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getNodes();
		for (var i = 0; i < nodes.length; i++) { //设置节点展开
			treeObj.expandNode(nodes[i], true, true , true);
		}
	}

	$(document).ready(function() {
		var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
		treeObj.expandAll(true);
	});
</SCRIPT>


	<script type="text/javascript">
		var dataTable;

		// key event
		function enterSearch() {
			$('#AlinesnoSearchForm input').each(function() {
				$(this).keyup(function(event) {
					if (event.keyCode == 13) {
						search();
					}
				});
			});
		}

		$(document).ready(function() {
			enterSearch();
			dataTable = $('#datatables').DataTable({
				"processing" : true,
				"serverSide" : true,
				"ajax" : {
					"url" : ctx+"boot/platform/account/datatables",
					"type" : "POST",
					"data" : function(d) {
						console.log("d = " + d);
						var searchParams = paramsBuilder();
						if (searchParams) {
							$.extend(d, searchParams); // 添加扩展参数 
						}
					}
				},
				"searching" : false,
				"lengthMenu" : [ 10, 20, 30, 50 ],
				"displayLength" : 10,
				"scrollX" : true,
				"responsive" : true,
				"columns" : [ 
					{"data" : "applicationIdLabel"}, 
					{"data" : "name"}, 
					{"data" : "loginName"}, 
					{"data" : "departmentLabel"}, 
					{"data" : "id"}, 
					{"data" : "rolePowerLabel"}, 
					{"data" : "hasStatusLabel"} 
				],
				columnDefs : [
	            	  {    
	            		  "targets" : 4, //操作按钮目标列
						  "render" : function(data, type,row , meta) {
							  return '<a data-id="'+data+'" style="cursor:pointer" onclick="showRoles(this)"><i class="fa fa-leaf" aria-hidden="true"> 查看权限 </a>' ; 
	            	  	  }
	            	  }
		        ],
				"language" : {
					"processing" : "处理中...",
					"lengthMenu" : "显示 _MENU_ 项结果",
					"zeroRecords" : "没有找到相应的结果",
					"info" : "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
					"infoEmpty" : "第 0 至 0 项结果，共 0 项",
					"infoFiltered" : "(由 _MAX_ 项结果过滤)",
					"infoPostFix" : "",
					"search" : "搜索:",
					"searchPlaceholder" : "请输入要搜索内容...",
					"url" : "",
					"thousands" : "'",
					"emptyTable" : "表中数据为空",
					"loadingRecords" : "载入中...",
					"infoThousands" : ",",
					"paginate" : {
						"first" : "首页",
						"previous" : "上页",
						"next" : "下页",
						"last" : "末页"
					}
				},
				"dom" : '<"toolbar">frtip'
			});

			$("div.toolbar").html('<b>'
						+ '<button type="button" onclick="addItem()" class="btn btn-primary" style="float:right;margin-right:10px">添加</button>'
						+ '<button type="button" onclick="deleteMultipleItem()" class="btn btn-primary" style="float:right;margin-right:10px">删除</button>'
						+ '<button type="button" onclick="authorizationItem()" class="btn btn-primary" style="float:right;margin-right:10px">授权</button>'
						+ '</b>');

			// 单选
			$('#datatables tbody').on( 'click', 'tr', function () {
				if ( $(this).hasClass('selected') ) {
					$(this).removeClass('selected');
				} else {
					dataTable.$('tr.selected').removeClass('selected');
					$(this).addClass('selected');
				}
				// 编辑
				editItem() ; 
			});

			/*
			// 多选
			$('#datatables tbody').on('click', 'tr', function() {
				$(this).toggleClass('selected');
			});
			*/
		});

		/**
		 * get params
		 */
		function paramsBuilder() {
			var param = {};
			$('#AlinesnoSortPanel input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#AlinesnoSearchForm input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#trainingSearchForm .selectpicker').each(
					function() {
						console.log('value = ' + this.value + ' , value = '
								+ $(this).val());
						if ($(this).val() != null && $(this).val() != ''
								&& this.name != '') {
							param[this.name] = $(this).val();
						}
					});
			return param;
		}

		//搜索
		function search(btn) {
			$('#datatables').dataTable().fnDraw(false);
		}

		// 添加
		function addItem() {
			layer.open({
				type : 2,
				title : '添加',
				shadeClose : true,
				shade : 0.8,
				maxmin : true, //开启最大化最小化按钮
				area : [ '600px', '750px' ],
				content : ctx+'boot/platform/account/add'
			});
		}

		// 删除多元素
		function deleteMultipleItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data();
			var rowsId = new Array();
			for (var i = 0; i < selectRows.length; i++) {
				rowsId.push(selectRows[i].id);
			}
			$.post(ctx+"boot/platform/account/delete", {
				rowsId : rowsId
			}, function(response) {
				$('#datatables').dataTable().fnDraw(false);
				console.log('response = ' + response);
			})
		}
		
		// 授权 
		function authorizationItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data();
			if(selectRows.length == 0){
				layer.alert("请选择元素.") ; 
				return ; 
			}
			var rowsId = selectRows[0].id ;
			layer.open({
				type : 2,
				title : '用户授权',
				shadeClose : true,
				shade : 0.8,
				area : [ '500px', '700px' ],
				maxmin : true, //开启最大化最小化按钮
				content : ctx+'boot/platform/account/auth?accountId='+rowsId  , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var rolesId = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("rolesId = " + rolesId ) ; 
					$.post(ctx+"boot/platform/account/authAccount", {
						accountId :rowsId , 
						rolesId: rolesId 
					}, function(response) {
						console.log('response = ' + response);
						if(response.code != 200){
							layer.alert(response.message) ; 
						} else {
							layer.msg("操作成功.")	
						}
					})
					
					layer.close(index) ; 
			 	}
			});
			
		}

		// 删除单个元素
		function deleteSingleItem() {
			var selectRow = $('#datatables').DataTable().row('.selected');
			console.log("select row = " + selectRow);
			selectRow.remove().draw(false);
		}
		
		function editItem(){
			var id = $('#datatables').DataTable().rows('.selected').data()[0]['id'];
			// menusEditForm
			$.getJSON(ctx+"boot/platform/account/detail?id="+id , function(response){
			 	console.log("response = " + response) ; 
			 	if(response.code == 200){
			 		$("form#menusEditForm").autofill(response.data);			 		
			 	}else{
			 		layer.alert(response.message) ; 
			 	}
			}) ; 
		}
	
		// 修改
		function modifyItem(){
			console.log('save');
			$("#menusEditForm").ajaxSubmit({
				url : ctx+"boot/platform/account/update",
				type : "POST",
				headers : {
					'Content-Type' : 'application/x-www-form-urlencoded' //multipart/form-data;boundary=--xxxxxxx   application/json
				},
				success : function(data) {
					if (data.code == 200) {
						layer.alert("操作成功!");
						search(null) ; 
					} else {
						layer.alert(data.message);
					}
				}
			});	
		}
		
		function showRoles(btn){
			var id = $(btn).attr("data-id") ; 
			layer.open({
				type : 2,
				title : '菜单管理',
				shadeClose : true,
				shade : 0.8,
				area : [ '500px', '700px' ],
				content : ctx+'pages/boot/platform/account/role?accountId=' + id 
			});		
		}
		
		function showResourceParent(){
			var index = layer.open({
				type : 2,
				title : '菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '30%', '80%' ],
				content : ctx+'boot/platform/account/parents?id=1' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-resourceName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("selectResourceId = " + id + " , selectResourceName = " + resourceName) ;
					
					$("input[name=resourceParentLabel]").val(resourceName) ; 
					$("input[name=resourceParent]").val(id) ; 
					
					layer.close(index) ; 
			 	}
			});		
		}
	</script>

</body>
</html>
